<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script src="http://labfile.oss.aliyuncs.com/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="http://labfile.oss.aliyuncs.com/respond.js/1.3.0/respond.min.js"></script>  
  </head>
  <body>
     <div class="container">
    <table class="table">  
      <caption>Table 基本案例</caption>  
      <thead>  
        <tr>  
          <th>First Name</th>  
          <th>Last Name</th>
          <th>User Name</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr>  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>  
 </div>  
 <div class="container">
    <table class="table table-striped">  
      <caption>条纹状表格</caption>  
      <thead>  
        <tr>  
          <th>First Name</th>  
          <th>Last Name</th>
          <th>User Name</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr>  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>  
 </div>
 <div class="container">
    <table class="table  table-bordered">  
      <caption>带边框</caption>  
      <thead>  
        <tr>  
          <th>First Name</th>  
          <th>Last Name</th>
          <th>User Name</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr>  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>  
 </div>
 <div class="container">
    <table class="table table-hover">
      <caption>鼠标悬停</caption>  
      <thead>  
        <tr>  
          <th>First Name</th>  
          <th>Last Name</th>
          <th>User Name</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr>  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>  
 </div>
 <div class="container">
    <table class="table">  
      <caption>Table 基本案例</caption>  
      <thead>  
        <tr>  
          <th>First Name</th>  
          <th>Last Name</th>
          <th>User Name</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr>  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>  
 </div>
 <div class="container">
    <table class="table">  
      <caption>Table 基本案例</caption>  
      <thead>  
        <tr>  
          <th>First Name</th>  
          <th>Last Name</th>
          <th>User Name</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr>  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>
    <table class="table table-condensed">  
  <caption>各种状态class</caption>  
  <thead>  
    <tr>  
      <th>#</th>
      <th>First Name</th>  
      <th>Last Name</th>
      <th>User Name</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr class="active">  
      <td>1</td>
      <td>aehyok</td>  
      <td>leo</td> 
      <td>@aehyok</td>  
    </tr>
    <tr class="success">  
      <td>2</td>
      <td>lynn</td>  
      <td>thl</td> 
      <td>@lynn</td>  
    </tr>
    <tr class="warning">  
      <td>3</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr class="danger"> 
      <td>4</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr > 
      <td class="success">5</td> 
      <td class="danger">Amdy</td>  
      <td class="warning">Amy</td> 
      <td class="active">@Amdy</td>  
    </tr>
  </tbody>  
</table> 
<div class="table-responsive">
<table class="table">  
  <caption>带滚动条的</caption>  
  <thead>  
    <tr>  
      <th>#</th>
      <th>First Name</th>  
      <th>Last Name</th>
      <th>User Name</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr class="active">  
      <td>1</td>
      <td>aehyok</td>  
      <td>leo</td> 
      <td>@aehyok</td>  
    </tr>
    <tr class="success">  
      <td>2</td>
      <td>lynn</td>  
      <td>thl</td> 
      <td>@lynn</td>  
    </tr>
    <tr class="warning">  
      <td>3</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr class="danger"> 
      <td>4</td> 
      <td>Amdy</td>  
      <td>Amy</td> 
      <td>@Amdy</td>  
    </tr>
    <tr > 
      <td class="success">5</td> 
      <td class="danger">Amdy</td>  
      <td class="warning">Amy</td> 
      <td class="active">@Amdy</td>  
    </tr>
  </tbody>  
</table>
</div> 
 </div>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>